<!-- 中间底部框 -->
<template>
  <div class="middledown">
    <dv-border-box-12 style="width: 100%;height: 100%;">
      <div id="middledown-box">
        <div class="top">
          <p>总体负责</p>

          <p>南顺联安围</p>

          <p>群力围,石龙围</p>
        </div>

        <div class="bottom">
          <div class="left">
            <p v-for="(v, i) in arr" :key="i">

              <span>{{ v.title }}</span>
              <span>{{ v.name }}</span> <span>{{ v.phone }}</span>
              <span class="duty">{{ v.duty }}</span>
            </p>
          </div>

          <div class="center">
            <p v-for="(v, i) in arr" :key="i">
              <span>{{ v.title }}</span>
              <span>{{ v.name }}</span> <span>{{ v.phone }}</span>
              <span class="duty">{{ v.duty }}</span>
            </p>

            <div class="group">勘察组:</div>

            <p v-for="(v, i) in arr2" :key="i">
              <span>{{ v.title }}</span>
              <span>{{ v.name }}</span> <span>{{ v.phone }}</span>
              <span class="duty">{{ v.duty }}</span>
            </p>
          </div>

          <div class="right">
            <p v-for="(v, i) in arr" :key="i">
              <span>{{ v.title }}</span>
              <span>{{ v.name }}</span> <span>{{ v.phone }}</span>
              <span class="duty">{{ v.duty }}</span>
            </p>

            <div class="group">排查组:</div>

            <p v-for="(v, i) in arr2" :key="i">
              <span>{{ v.title }}</span>
              <span>{{ v.name }}</span> <span>{{ v.phone }}</span>
              <span class="duty">{{ v.duty }}</span>
            </p>
          </div>
        </div>
      </div>
    </dv-border-box-12>
  </div>
</template>

<script setup>
let arr = [
  {
    title: "项目负责人",
    name: "李俊霖",
    phone: "13467212632",
    duty: "现场总负责",
  },
  {
    title: "项目负责人",
    name: "李俊霖",
    phone: "13467212632",
    duty: "现场总负责",
  },
  {
    title: "项目负责人",
    name: "李俊霖",
    phone: "13467212632",
    duty: "现场总负责,全面负责人，负责行政以及后勤",
  },
  {
    title: "项目负责人",
    name: "李俊霖",
    phone: "13467212632",
    duty: "现场总负责,全面负责人，负责行政以及后勤",
  },
  {
    title: "项目负责人",
    name: "李俊霖",
    phone: "13467212632",
    duty: "现场总负责,全面负责人，负责行政以及后勤",
  },
  {
    title: "项目负责人",
    name: "李俊霖",
    phone: "13467212632",
    duty: "现场总负责",
  },
];
let arr2 = [
  {
    title: "项目负责人",
    name: "李俊霖",
    phone: "13467212632",
    duty: "现场总负责",
  },
  {
    title: "项目负责人",
    name: "李俊霖",
    phone: "13467212632",
    duty: "现场总负责",
  },
];
</script>

<style scoped>
.middledown {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10%;
  display: flex;
  position: relative;
}

#middledown-box {
  height: 332px;
  width: 1220px;
  background: rgba(4, 14, 17, 0.7);
  border-radius: 2%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* transform: translate(-50%, -50%); */
}

.top {
  height: 12%;
  display: flex;
  align-items: center;
  /* background-color: #254e4a63; */
}

.top p {
  width: 33.33%;
  text-align: center;
  color: #69e2d4;
}

.bottom {
  height: 90%;
  display: flex;
  color: white;
  font-size: 13px;
  overflow: auto;
}

.group {
  font-size: 14px;
  margin: 3px 0;
}

.bottom div {
  width: 33.33%;
}

.bottom div p {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  cursor: pointer;
}

.bottom div p:hover {
  color: #69e2d4;
}

.bottom div p span {
  display: inline-block;
  width: 25%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bottom div p:hover span {
  overflow: auto;
  white-space: wrap;
}

.bottom div p span:nth-child(2) {
  width: 15%;
}

.bottom div p span:nth-child(4) {
  width: 35%;
}
</style>